<template>
  <div class="hello">
    <div><button @click="tiggerUser">切换用户</button><span> {{ currentUser.name }} </span></div>
    <div><button @click="send_message('click')">点赞</button><span> {{ currentUser.name }} </span></div>
    <div><button @click="send_message('job_collect')">收藏</button><span> {{ currentUser.name }} </span></div>
    <div><button @click="send_message('cv_send')">投简历</button><span> {{ currentUser.name }} </span></div>
    <div><button @click="send_message('cv_upload')">上传简历</button><span> {{ currentUser.name }} </span></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  data () {
    return {
      users: [
        {
          user_id: "1",
          name: 'zhangsan',
          age: 18,
          job_code: "1001"
        },
        {
          user_id: "2",
          name: 'lisi',
          age: 27,
          job_code: "1001"
        },
        {
          user_id: "3",
          name: 'wangwu',
          age: 30,
          job_code: "1002"
        }
      ],
      currentUser: {}
    }
  },
  methods: {
    tiggerUser() {
      let tmp = this.currentUser.user_id
      while(true) {
        this.currentUser = this.users[Math.ceil(Math.random()*this.users.length) - 1]
        if (tmp != this.currentUser.user_id) {
          break;
        }
      }
    },
    send_message(action) {
      let userInfo = this.currentUser
      userInfo['action'] = action
      userInfo['act_time'] = new Date().getTime()
      axios.post("/api/user_log", userInfo)
    }
  },
  mounted() {
    this.currentUser = this.users[0]
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
